<template>
	<view class="friendinfo" :style="{marginTop:systemBarHeight+'px'}">
		<view class="bgimg" :style="{backgroundImage:'url(' + userinfo.imgurl + ')'}"></view>
		<view class="header">
			<image src="../../static/images/commom/back.png" class="btn back" @tap="oneback"></image>
			<image src="../../static/images/commom/more.png" class="btn more" @tap = "detail"></image>
		</view>
		<view class="userimg">
			<!-- <image src="../../static/images/userimg/pic_a.jpg" class="img" ref="userimg"></image> -->
			<img  :src = "userinfo.imgurl" class="img" ref="userimg" :style = "{borderRadius:borderRadius,transform:transform}">
			<image src="../../static/images/commom/female.png" class="sex" v-show="!showadd && userinfo.sex == 'female'"></image>
			<image src="../../static/images/commom/male.png" class="sex" v-show="!showadd &&userinfo.sex == 'male'"></image>
		</view>
		<view class="name">
			{{userinfo.name}}
		</view>
		<view class="littername" v-show="userinfo.isfriend == 0 ? false : userinfo.isfriend == 2 ? false : true">
			昵称:{{userinfo.markname}}
		</view>
		<view class="decribe">
			{{userinfo.desc}}
		</view>
		<view class="addfriend" >
			<view class="btn" @tap = "addfriend" v-if="flag">
				{{btninfo}}
			</view>
		</view>
		<transition name="slide-cover">
			<view class="cover" v-show="showadd"></view>
		</transition>		
		<transition name="slide-addfriend">		
			<view class="addfriendbox" v-show="showadd"  >
				<view class="name">
					{{userinfo.name}}
				</view>
				<textarea class="inputinfo" maxlength="120" v-model="requestvalue"></textarea>
				<view class="btnbox">
					<view class="btn cancle" @tap = "cancle">
						取消
					</view>
					<view class="btn send" @tap="sendrequest">
						发送
					</view>
				</view>
			</view>
		</transition>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'//获取vuex的登录用户信息
	export default {
		data() {
			return {
				userinfo:{},
				user:{},
				fid:'',//用户的id值
				showadd:false,
				borderRadius:'20%',
				transform:'translate3d(0%,0%,0) scale(1)',
				requestvalue:'',
				systemBarHeight:''
			}
		},
		onLoad(e){
			this.getSysteminfo();
			if(e.id != undefined){			
				this.gettoken();
				this.fid = e.id;
				this._getuserdetail();
			}else{		
				uni.navigateTo({
					url:`../llogin/llogin`
				})
			}
		},
		computed:{
			flag(){
				let str = this.userinfo.isfriend;
				if(str == 0){
					return false;
				}else if(str = 1){
					return true;
				}else{
					return false;
				}
			},
			btninfo(){//按钮的内容
				let str = this.userinfo.isfriend;
				if(str == 1){
					return '聊天';
				}else{
					return '添加好友';
				}
			},
			...mapGetters([
				'user1'
			])
		},
		methods:{
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			oneback(){
				uni.navigateBack({
				    detla:1,
				})
			},
			detail(){
				uni.navigateTo({
					url:"../userinfo/userinfo?id="+this.fid
				})
			},
			addfriend(){
				let str = this.userinfo.isfriend;
				if(str == 1){
					uni.navigateTo({//跳转到聊天页面
						url:`../chartroom/chartroom?id=${this.userinfo._id}&imgurl=${this.userinfo.imgurl}&name=${this.userinfo.name}&tap=${0}`
					})
				}else{
					this.showadd = true
					this.requestvalue = this.user.name+"向"+this.userinfo.name+"发出好友申请";
					this.borderRadius = "50%";
					this.transform = ' translate3d(-80%,-8%,0) scale(0.6)'
				}
				
			},
			cancle(){
				this.showadd = false
				this.borderRadius = "20%";
				this.transform = 'translate3d(0%,0%,0) scale(1)'
			},
			sendrequest(){//发送好友申请
				uni.request({
					url:this.serverurl+'friend/applyfriend',
					data:{
						uid:this.user.id,
						fid:this.userinfo._id,
						message:this.requestvalue,
						token:this.user.token
					},
					method:'POST',
					success:(result)=>{
						let info = result.data;
						if(info.status == 200){
							this.showadd = false;
							this.borderRadius = "50%";
							this.transform = 'translate3d(0%,0%,0) scale(1)'
						}else if(info.status == 500){						
							uni.showToast({
								title: '网络异常,请检查',
								duration: 2000,
								icon:'none',
								position:'top'
							});
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			gettoken(){
				try {
				    const value = uni.getStorageSync('wikiuser');
				    if (value) {
				       this.user = (JSON.parse(value))
				    }
				} catch (e) {
				    console.log(e)
				}
			},		
			_getuserdetail(){//获取用户信息
				uni.request({
					url:this.serverurl+'user/detail',
					data:{
							uid:this.user.id,
							fid:this.fid,
							token:this.user.token
					},
					method:'POST',
					success: (result) => {
						let obj = result.data;
						if(obj.status == 200){
							let myobj = obj.data;
							myobj.imgurl = this.serverurl+`userimage/${myobj.imgurl}`;
							if(typeof(myobj.markname) == 'undefined'){
								myobj.markname = myobj.name
							}
							this.userinfo = JSON.parse(JSON.stringify(myobj));	
							// console.log(this.userinfo)
						}else if(obj.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}else if(obj.status == 500){
							uni.showToast({
							    title: '网络出现问题',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
						}
								
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.friendinfo{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	.bgimg{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		background-image: url("../../static/images/userimg/pic_a.jpg");
		background-size:cover;
		background-position: center center;
		transform: scale(1.08);
		filter: blur(20px);
		z-index: -1;
		&:before{
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(5,102,29,0.4);;
		}
	}
	.header{
		height: 120rpx;
		width: 100%;
		padding: 0 42rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		z-index: 1200;
		.btn{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.userimg{
		position: relative;
		margin:  0 auto;
		margin-top: 120rpx;
		width: 100%;
		margin-bottom: 28rpx;
		Width: 300rpx;
		height: 300rpx;
		z-index: 999;
		.img{
			display: block;
			transition: all .6s ease;
			width: 300rpx;
			height: 300rpx;
			box-sizing: border-box;
			border: 3px solid rgba(52, 199, 88, 100);
			margin: 0 auto;
			border-radius: 40rpx;
		}
		.sex{
			box-sizing: border-box;
			position:absolute;
			width: 48rpx;
			height: 48rpx;
			bottom: 12rpx;
			right: 15rpx;
			// border: 1px solid rgba(187, 187, 187, 100);
			
		}
	}
	.name{
		color: rgba(242, 242, 247, 100);
		font-size: 56rpx;
		text-align: center;
		
	}
	.littername{
		color: rgba(189, 189, 189, 100);
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 28rpx;
	}
	.decribe{
		padding: 42rpx;
		color: rgba(242, 242, 247, 100);
		font-size: 14px;
		height: 400rpx;
		overflow: hidden;
	}
	.addfriend{
		position: absolute;
		left: 0rpx;
		bottom: 4%;
		width: 100%;
		.btn{
			margin: 0 auto;
			width: 496rpx;
			height: 88rpx;
			opacity: 0.78;
			border-radius: 32rpx;
			background-color: rgba(52, 199, 88, 100);
			text-align: center;
			line-height: 88rpx;
			color: rgba(255, 255, 255, 100);
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.cover{
		// display: none;
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100%;
		background-color: rgba(5, 102, 29, .83);
	}
	.addfriendbox{
		// display: none;
		position: absolute;
		top: 360rpx;
		bottom: 0;
		width: 100%;
		background-color: rgba(255, 255, 255, 100);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 58rpx;
		box-sizing: border-box;
		.name{
			color: rgba(16, 16, 16, 100);
			font-size: 28px;
			text-align: left;
			margin-top: 114rpx;
		}
		.inputinfo{
			margin-top: 14rpx;
			box-sizing: border-box;
			padding: 46rpx 36rpx;
			width: 630rpx;
			height: 466rpx;
			border-radius: 24rpx;
			background-color: rgba(242, 242, 247, 100);
			color: rgba(16, 16, 16, 100);
			font-size: 28rpx;
		}
		.btnbox{
			margin-top: 32rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			.btn{
				height: 88rpx;
				border-radius: 24rpx;
				text-align: center;
				font-weight: bold;
				line-height: 88rpx;
				color: #FFFFFF;
				&.cancle{
					width: 204rpx;
					background-color: rgba(158, 158, 158, 100);
				}
				&.send{
					width: 400rpx;
					background-color: rgba(52, 199, 88, 100);
				}
			}
		}
	}
	.slide-cover-enter-active ,.slide-cover-leave-active{
		transition: all .6s ease;
	}
	.slide-cover-enter,.slide-cover-leave-to{
		opacity: 0;
	}
	.slide-addfriend-enter-active ,.slide-addfriend-leave-active{
		transition: all .6s ease;
	}
	.slide-addfriend-enter,.slide-addfriend-leave-to{
		transform: translateY(100%);
	}
}
</style>
